<template>
  <div style="">
    <div class="goodsBox">
      <div class="goodsBox-img">
        <el-image
          style="position: absolute;width: 500px; height: 600px;left: 0px;border-radius: 14px;"
          :src="imgUrl"
          :preview-src-list="srcList">
        </el-image>
        <div class="goodsBox-store">
          <p>{{goodsList.desc}}</p>
          <el-rate
            v-model="value"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
          </el-rate>
        </div>
        <div class="goodsBox-btn">
          <br><br>
          <h1>{{goodsList.name}}</h1><br>
          <p>美味海鲜随心选！</p><br><br><br><br><br>
          <h2><span style="color: #777777">售价&ensp;</span><span
            style="color: #e4393c;font-family: simsun">&yen;<span></span>{{money}}</span></h2>
          <br><br>
          <h4 style="position: relative;left: -35%;"><span style="color: #777777">库存&ensp;</span><span
            style="color: #4D6530;font-family: simsun"><span></span>{{sum}}</span></h4>
          <el-input-number size="large" v-model="num" :min="1" :max="sum" @change="handleChange"
                           label="商品数量"></el-input-number>
          <el-button size="medium" type="danger" @click="add1">加入购物车</el-button>
          <el-button size="medium" type="warning" @click="add2">收藏</el-button>
          <p style="color: #777777">温馨提示·海鲜不支持退货</p>
        </div>
      </div>
    </div>
    <!--    猜你喜欢-->
    <div class="goodsLikes" id="goodsLikes" style="text-align: center;">
      <hr/>
      <h1 style="color: #777777">猜你喜欢</h1>
      <div style="margin-left: 23%">
        <div class="card" v-for="(item, index) in goodsLikesList" :key="item.id" v-on:mouseenter="showDialog(index)"
             v-on:mouseleave="hideDialog(index)">
          <div class="ribbon">
            <!--鼠标移入移出事件-->
            <div class="handleDialog" v-if="ishow && index==current">
              <p style="margin-left:5%;margin-top: 60%;">{{goodsList.name}}</p>
              <el-button type="success" style="margin-left:5%;" size="medium" @click="goGoodsDesc(item.id)">查看详情
              </el-button>
            </div>
            <img :src="item.img" style="height: 100%;width: 100%">
            <h2><span style="color: #e4393c;font-family: simsun">&yen;{{money}}</span></h2>
          </div>
        </div>
      </div>
      <!--      <div style="float: left;width: 23%;height: 1px;"></div>-->
      <br><br>
    </div>
    <!--    详情图片-->
    <div class="goodsDescImg" id="goodsDescImg" style="text-align: center;margin-top: 300px">
      <hr/>
      <h1 style="color: #777777">商品详情</h1><br><br><br>
      <el-image v-for="url in srcList" :key="url" :src="url"></el-image>
    </div>
  </div>


</template>

<script>
  export default {
    name: "goodsDesc",
    props: {
    },
    data() {
      return {
        goodsList: {},
        num: 1,
        value: 3.7,
        money: 5999.00,
        prize: 5999.00,
        sum: 65,
        goodsId: '0',
        //隐形窗口
        ishow: false,
        current: 0,

        //按钮点击限制
        add1_can_press: true,
        add2_can_press: true,
        err_can_press: true,

        //商品详情
        imgUrl: '',
        //推荐列表
        srcList: [
          'http://img30.360buyimg.com/popWareDetail/jfs/t1/195007/29/21266/487245/61308500Eec8249bb/cfe4eefa2e76e061.jpg',
        ], goodsLikesList: [
          {
            id: 1,
            name: "Iphone XS Max",
            img: "https://img13.360buyimg.com/n7/jfs/t1/156044/37/8082/528791/601369c2E3e5ab1f1/cdc30c8f82d78b1e.jpg",
            prize: "10.00",
            desc: "233"
          },
          {
            id: 2,
            name: "Iphone XS Max",
            img: "https://img12.360buyimg.com/n7/jfs/t1/177885/13/8823/232314/60c46620E789f9111/47091becf8d40056.jpg",
            prize: "10.00",
            desc: "233"
          },
          {
            id: 3,
            name: "Iphone XS Max",
            img: "https://img11.360buyimg.com/n7/jfs/t1/210975/30/12250/220125/61b5568fEecacd998/8ed61e1cf548b943.jpg",
            prize: "10.00",
            desc: "233"
          },
          {
            id: 4,
            name: "Iphone XS Max",
            img: "https://img10.360buyimg.com/n7/jfs/t1/165716/40/8134/85143/603c9652E77fda091/0976d6bbe082167a.jpg",
            prize: "10.00",
            desc: "233"
          },
          {
            id: 5,
            name: "Iphone XS Max",
            img: "https://img12.360buyimg.com/n7/jfs/t1/168477/39/21159/927428/6087c649E0ac7ebce/b87f6b39346eb746.png",
            prize: "10.00",
            desc: "233"
          },
        ]
      };
    },
    mounted() {
      //if (this.$route.query.goods.name != null) {
        //this.$router.push('/helloHome');
        this.goodsList = this.$route.query.goods//商品列表
        this.datainit();
        //localStorage.setItem('goodsDesc',JSON.stringify(this.goodsList))
      //}else{
        //const data1 = JSON.parse(localStorage.getItem('goodsDesc'));
        //this.goodsList = data1//商品列表
        this.datainit();
      //}
      //数据初始化
      this.getdate();
    }
    ,
    methods: {
      //初始化数据
      datainit(){
        this.imgUrl = this.goodsList.img;//传过来的商品图片
        this.money=this.goodsList.prize
        this.prize=this.goodsList.prize
      },
      //数据更新
      getdate() {
      },
      //前往商品详情页
      goGoodsDesc(goods) {
        this.$router.push({
          path: '/goodsDesc',
          query: {
            goods: goods
          }
        });
      },
      handleChange(value) {
        this.money = value * this.prize;
        //console.log(value);
      },
      //显示操作项
      showDialog(index, item) {
        this.ishow = true;
        this.current = index;
      },
      //隐藏蒙层
      hideDialog(index, item) {
        this.ishow = false;
        this.current = null;
      },
      //添加购物车
      add1() {
        if (this.add1_can_press == true) {
          this.$notify({
            title: '添加购物车',
            message: '商品已添加到你的购物车',
            type: 'success'
          });
          this.add1_can_press = false;
          const a={
            name: this.goodsList.name,
            prize: this.prize,
            status: "2",
            img: this.goodsList.img,
            nums: this.num
          }//todo 连后端加购物车数据
          this.$router.push(
            {
              path: '/carts',
              query: {
                tableDataOne: a
              }
            }
          )
          setTimeout(() => {
            this.add1_can_press = true;
          }, 2000)
        } else if (this.err_can_press == true) {
          this.$notify.error({
            title: '错误',
            message: '请求过于频繁，2秒后重试'
          });
          this.err_can_press = false;
          setTimeout(() => {
            this.err_can_press = true;
          }, 1000)
        }
      },
      //添加收藏
      add2() {
        console.log(this.$route.query.goods)
        console.log(this.goodsList)
        if (this.add2_can_press == true) {
          this.$notify({
            title: '收藏',
            message: '收藏成功',
            type: 'success'
          });
          this.add2_can_press = false;
          const a={name: this.goodsList.name,prize: this.prize,status: "2",img: this.goodsList.img,nums: this.num}
          //todo 连后端加收藏数据
          this.$router.push(
            {
              path: '/collection',
              query: {
                tableDataOne: a
              }
            }
          )
          setTimeout(() => {
            this.add2_can_press = true;
          }, 2000)
        } else if (this.err_can_press == true) {
          this.$notify.error({
            title: '错误',
            message: '请求过于频繁，2秒后重试'
          });
          this.err_can_press = false;
          setTimeout(() => {
            this.err_can_press = true;
          }, 1000)
        }

      },
    }

  }
</script>

<style scoped>
  .goodsBox {
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);*/
    /*background: #F2F8FE;*/
    position: relative;
    width: 1400px;
    height: 800px;
    margin: 0 auto;
    text-align: center;
  }

  .goodsBox-img {
    position: absolute;
    top: 5%;
    left: 15%;
    width: 75%;
    height: 75%;
    /*background-color: #409EFF;*/
    /*text-align: center; */
    /* vertical-align: middle; */
  }

  .goodsBox-btn {
    position: absolute;
    top: 15%;
    left: 55%;
    width: 40%;
    height: 20%;
    /*background-color: #409E1F;*/
    text-align: center;
    vertical-align: middle;
  }

  .goodsBox-store {
    position: absolute;
    top: 5%;
    left: 45%;
    width: 30%;
    height: 20%;
    /*background-color: #409E1F;*/
    text-align: center;
    vertical-align: middle;
  }

  /**
  卡片
   */

  .card {
    height: 170px;
    width: 170px;
    margin-left: 30px;
    margin-top: 30px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 4px;
    float: left;
  }

  .card img {
    width: 100%;
    height: 100%;
  }

  .card span {
    font-size: 15px;
    color: #BFBFBF;
    display: block;
    letter-spacing: 2px;
    /*padding: 0px 20px;*/
  }

  /**
隐藏页
*/
  .handleDialog {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
  }

  /**
丝带
 */

  .ribbon {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    float: left;
    margin-bottom: 30px;
    background-size: cover;
    text-transform: uppercase;
    color: white;
  }
</style>
